<template>
  <a-card>
    <a-form @submit="handleSubmit" :form="form" class="form">
      <a-row :gutter="[8]">
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入编码"/>
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入名称"/>
          </a-form-item>
        </a-col>
        <a-col :xl="{ span: 8, offset: 2 }" :lg="{ span: 10 }" :md="{ span: 24 }" :sm="24">
          <a-form-item>
            <a-button type="primary">查询</a-button>
            <a-button>重置</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <advance-table :columns="columns" :data-source="dataSource" title=" " :loading="loading" rowKey="id"
      @search="onSearch" @refresh="onRefresh" :format-conditions="true" @reset="onReset" :pagination="{
        current: page,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }">
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'action'">
          <a>编辑</a>
          <a>删除</a>
        </template>
      </template>
    </advance-table>
  </a-card>
</template>

<script>
import AdvanceTable from '@/components/table/advance/AdvanceTable'
export default {
  name: 'Table',
  components: { AdvanceTable },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: '编码',
          dataIndex: 'name',
        },
        {
          title: '名称',
          dataIndex: 'name',
        },
        {
          title: '操作',
          dataIndex: 'action',
          fixed: 'right',
        }
      ],
      dataSource: [],
      conditions: {}
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.table {
  background-color: @base-bg-color;
  padding: 24px;
}
</style>